﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
    <link href="../../../lib/ligerUI/skins/Aqua/css/ligerui-all.css" rel="stylesheet" type="text/css" />
    <link href="../../../lib/ligerUI/skins/Gray/css/all.css" rel="stylesheet" />
    <script src="../../../lib/jquery/jquery-1.9.0.min.js" type="text/javascript"></script> 
    <script src="../../../lib/ligerUI/js/ligerui.all.js" type="text/javascript"></script>  

    <script src="../../../lib/jquery-validation/jquery.validate.min.js"></script>
    <script src="../../../lib/jquery-validation/jquery.metadata.js" type="text/javascript"></script>
    <script src="../../../lib/jquery-validation/messages_cn.js" type="text/javascript"></script>
    <style>
        .liger-button {
            margin-bottom: 3px;
        }
    </style>
</head>
<body style="padding: 10px">
   <form id="form1" class="liger-form" data-validate="{}">
        <div class="fields">
            <input data-type="text" data-label="标题" data-name="Title" validate="{required:true,minlength:5}" />
            <input data-type="date" data-label="入职日期" data-name="addDate"  validate="{required:true}"/>
            <li data-label="国家" data-type="select" data-name="Country" data-textField="CountryName" data-width="200" validate="{required:true}" >
                <input class="editor" data-data="getCountryData()" data-textField="Name" data-valueField="Code"   /> 
            </li>
        </div>  
    </form> 

    <div class="liger-button" data-click="f_validate" data-width="150">验证</div> 
    <script>
        function getCountryData() {
            return [
            { Name: '中国', Code: 'ZG' },
            { Name: '德国', Code: 'DG' },
            { Name: '美国', Code: 'MG' },
            { Name: '澳大利亚', Code: 'ADLY' },
            { Name: '加拿大', Code: 'JND' }
            ];
        }
        function f_validate() {
            var form = liger.get('form1');
            if (form.valid()) {
                alert('验证通过');
            }
            else {
                form.showInvalid();
            }
        } 

    </script>
</body>
</html>
